<template>
  <div class="header">
    <div>
      <LContract></LContract>
    </div>
    <div>
      <FullScreen></FullScreen>
    </div>
    <div class="user"  @click="showSelect">
      <img :src="this.$store.state.usermsg.userImg" alt="" />
      <p class="username">{{this.$store.state.usermsg.username}}</p>
    </div>
     <Select v-show="isShow"></Select>
    <Dialog2 v-if="isShowDialog1"></Dialog2>
    <Dialog3 v-if="isShowDialog2"></Dialog3>
  </div>
</template>

<script>
import FullScreen from './tabbar/FullScreen.vue'
import { Bus } from "../Bus";
import LContract from './tabbar/LContract'
import Select from "./select/Select";
import Dialog2 from "./select/dialog2.vue";
import Dialog3 from "./select/dialog3.vue";
export default {
name:'Header',

components:{
  LContract,
FullScreen,
 Select,
    Dialog2,
    Dialog3,
},
   data() {
    return {
      isShow: false,
      isShowDialog1: false,
      isShowDialog2: false,
    };
  },
   mounted(){
    Bus.$on("showselect",(value)=>{
      this.isShow = value;
    })
     Bus.$on("isShowDialog1",(value)=>{
      this.isShowDialog1 = value;
    })
    Bus.$on("isShowDialog2",(value)=>{
      this.isShowDialog2 = value;

    })
  },
  methods: {
    showSelect() {
      this.isShow = !this.isShow;
    },
  },
}
</script>

<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  height: 60px;
  width: 100%;
  padding: 0 20px;
  // padding-left: 200px;
  background-color: #fff;
  .user {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 60px;
    border-bottom: 2px solid rgb(3, 187, 248);
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
        padding: 0 10px;
    }
  }
   .select {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 3000;
  }
}
</style>